<!--
 * @Descripttion:日期范围查询选择 
 * @version: 
 * @Author: hutao
 * @Date: 2021-12-30 16:11:03
 * @LastEditors: hutao
 * @LastEditTime: 2023-06-19 19:34:27
-->
<template>
  <el-date-picker
    :disabled="disabled"
    v-model="state.value"
    style="width: 100%; background: #fff"
    :default-time="type === 'datetimerange' ? ['00:00:00', '23:59:59'] : []"
    @change="onChange"
    :format="format"
    :value-format="format"
    :type="type"
    :start-placeholder="placeholder"
    :end-placeholder="placeholder"
    :picker-options="state.pickerOptions"
    :clearable="clearable"
  >
  </el-date-picker>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
interface State {
  /** 数据状态 */
  loading: boolean;
  value?: string;
  pickerOptions: any;
}
@Component
export default class Index extends Vue {
  @Prop() value!: string;
  /** 是否禁用 */
  @Prop({ default: false }) disabled?: boolean;
  /* 是否只读 */
  @Prop({ default: false }) readonly?: boolean;
  @Prop({ default: true }) clearable?: boolean;
  @Prop() defaultTime?: string;
  /** 是否是未来的快捷选择 */
  @Prop() isFuture?: boolean;
  @Prop() pickerOptions?: any;
  @Prop({ default: "请选择" }) placeholder?: string;
  @Prop({ default: "daterange" }) type?: string;
  /** 数据 */
  /** 数据 */
  state: State = {
    loading: false,
    value: undefined,
    pickerOptions: {
      shortcuts: [
        {
          text: "最近一周",
          onClick(picker: any) {
            const end = new Date();
            const start = new Date();

            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit("pick", [start, end]);
          },
        },
        {
          text: "最近一个月",
          onClick(picker: any) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit("pick", [start, end]);
          },
        },
        {
          text: "最近三个月",
          onClick(picker: any) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit("pick", [start, end]);
          },
        },
      ],

      ...(this.pickerOptions
        ? this.pickerOptions
        : {
            disabledDate(time: any) {
              return false;
            },
          }),
    },
  };

  /** 生命周期 */
  created() {
    this.state.value = this.value;
    if (this.isFuture) {
      this.state.pickerOptions.shortcuts = [
        {
          text: "最近一周",
          onClick(picker: any) {
            const end = new Date();
            const start = new Date();
            end.setTime(end.getTime() + 3600 * 1000 * 24 * 7);
            picker.$emit("pick", [start, end]);
          },
        },
        {
          text: "最近一个月",
          onClick(picker: any) {
            const end = new Date();
            const start = new Date();
            end.setTime(end.getTime() + 3600 * 1000 * 24 * 30);
            picker.$emit("pick", [start, end]);
          },
        },
        {
          text: "最近三个月",
          onClick(picker: any) {
            const end = new Date();
            const start = new Date();
            end.setTime(end.getTime() + 3600 * 1000 * 24 * 90);
            picker.$emit("pick", [start, end]);
          },
        },
      ];
    }
  }
  /** 生命周期 */

  /** 方法 */
  resetValue(val: any) {
    this.state.value = val;
  }
  onChange(e: string[] | undefined | null) {
    this.$emit("input", this.state.value);
    this.$emit("change", e);
  }
  /** 监听 */
  /** 监听 */
  @Watch("value")
  onValue(val: string) {
    this.state.value = val;
  }
  /** 计算属性 */
  get format() {
    if (this.type === "daterange") {
      return "yyyy-MM-dd";
    } else {
      return "yyyy-MM-dd HH:mm:ss";
    }
  }
}
</script>
<style lang="scss" scoped></style>
